<template>
  <div id="forget">
    <section class="sm_f">
      <div class="border">
        <span>输入密码</span>
        <input id="pwd" type="password" class="sm_f" placeholder="输入新密码" v-model="password1">
      </div>
      <div class="border">
        <span>确认密码</span>
        <input type="password" class="sm_f" placeholder="确认新密码" v-model="password2">
      </div>
    </section>
    <div class="draw_btn login-btn" v-tap="{methods: submit}">
      <div>确定</div>
    </div>
  </div>
</template>

<script>
// obj
import Vue from "vue";
// service
import { UpdatePwd, CheckUserNameOrTEL } from "services/share/forgetPassword";

export default {
  data() {
    return {
      phone: null,
      userId: null,
      password1: "",
      password2: ""
    };
  },
  methods: {
    // 提交密码
    submit() {
      let vm = this
      if (this.passwordValid()) {
        // update user password
        UpdatePwd.bind(this)(
          {
            type: 0,
            userId: this.userId,
            userNewPwd: this.password1
          },
          res => {
            this.$.toast("密码重置成功, 请重新登录");
            setTimeout(function() {
              vm.$router.push({
                name: "login",
                query: {
                  phoneNumber: vm.phone
                }
              });
            }, 800);
          },
          (err, code) => {
            this.$.toast(err);
          }
        );
      }
    },
    // 页面参数校验
    passwordValid() {
      let result = true;
      if (this.isNull(this.userId)) {
        this.$.toast("账号信息有误, 请返回上一页面重新输入");
        result = false;
      } else if (this.isNull(this.password1)) {
        this.$.toast("密码不能为空");
        result = false;
      } else if (this.isNull(this.password2)) {
        this.$.toast("确认密码不能为空");
        result = false;
      } else if (this.password1 !== this.password2) {
        this.$.toast("两次输入的密码不一致");
        this.password1 = null
        this.password2 = null
        pwd.focus()
        result = false;
      }
      
      return result;
    },
    isNull(val) {
      return null == val || "" == val;
    }
  },
  created() {
    // 账号
    if ((this.$route.query.phone)) {
      let phone = this.phone = this.$route.query.phone;
      // debugger
      // get user Id
      CheckUserNameOrTEL.bind(this)(
        {
          account: phone
        },
        res => {
          this.userId = res.userId;
        },
        (err, code) => {
          this.$.toast(err);
          this.$router.back();
        }
      );
    } else {
      this.$router.back();
    }
  }
};
</script>

<style>
#forget {
  padding: 1em;
  background-color: #ececec;
  position: relative;
  height: 100vh;
}
#forget input {
  flex: 1;
  padding: 0px 8px;
  outline: none;
  border: none;
}
#forget input:focus {
  outline: none;
}
#forget .border {
  display: flex;
  align-items: center;
  padding: 6px;
  background: #fff;
  margin-bottom: 1em;
}
#forget .tel {
  width: 20px;
  height: 100%;
}
#forget .draw_btn {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  background: #f98700;
  margin-bottom: 1em;
  border-radius: 5px;
}
#forget .invalid {
  padding: 8px;
  border: none;
  color: #929292;
  background-color: #ececec;
  border-radius: 4px;
}
#forget .legal {
  padding: 8px;
  border: none;
  background-color: #f98700;
  color: #fff;
  border-radius: 4px;
}
</style>